<template>
  <div>
    <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <!-- 翻转: 会更新页面 -->
    <button @click="rev">翻转</button>
    <!-- 截取:不会更新页面 -->
    <button @click="sli">截取</button>
    <!-- vue2 响应式的原理是采用数据劫持:Object.defined -->
    <!-- vue3 响应式的原理是采用数据代理:Proxy -->
    <button @click="update">更新</button>
  </div>
</template>

<script>
export default {
  name: "Two1",

  data() {
    return {
      arr: [10, 20, 30],
      arr2: [{ age: 18 }],
    };
  },
  methods: {
    rev() {
      this.arr.reverse();
    },
    sli() {
      //this.arr.splice()
      //截取
      //参数1:从哪个位置开始截取
      //参数2:结束的索引,截取到哪里去
      //包头不包尾
      //不会修改原数组
      //解决方案:覆盖到原数组即可
      this.arr = this.arr.slice(1, 2);
      //修改原数组的方法:
      //reverse()
      //sort()
      //push()
      //unshift()
      //shift()
      //pop()
      //splice() 删除/删除后插入
      //不修改原始数组:
      //concat()
      //slice()
      //join()
      //遍历方法:forEach()
    },
    update() {
      //使用数组的索引修改数据
      //this.arr[0]='a'
      //vue2 知道自己存在这个问题,所以提供一种方案来解决问题:this.$set 方法
      //参数1:要修改的数据(对象或数组)
      //参数2:要修改的索引
      //参数3:要修改成什么值
      this.$set(this.arr, 0, "a");
    },
    changeAge() {
      this.arr[2].age = 28; //网页可更新!
    },
  },
};
</script>

<style lang="scss" scoped>
</style>